.data-preview {
  width: 500px;
  height: 655px;
  background-color: #fbfbfb;

  overflow-y: auto;
  overflow-x: hidden;

  cursor: default;

  padding-top: 20px;
  padding-bottom: 80px;
  position: relative;

  &.has-overlay {
    overflow: hidden;

    .overlay-container {
      display: block;
    }
  }

  .overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 655px;

    background: #fbfbfb;
    display: none;

    .overlay-content {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -10px;

      width: 100%;
      height: 20px;

      text-align: center;

      .spinner {
        display: inline-block;
        vertical-align: top;

        width: 30px;
        height: 30px;

        margin-right: 0px;
        margin-top: -5px;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('');
      }

      p {
        display: inline-block;
        vertical-align: top;

        color: #8b8c90;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }

  .lines-container {
    width: 1200px;

    .line {
      height: 20px;
      overflow: hidden;

      position: relative;

      &.hidden {
        display: none;
        // height: 0;
        // overflow: hidden;
      }

      &:hover {
        background-color: #f4f4f4;

        .line-number,
        .fold {
          background-color: #fbfbfb;
        }

        .line-number {
          color: #8b8c90;
        }
      }

      p {
        display: inline-block;
        vertical-align: top;
        height: 20px;
        line-height: 20px;

        color: #3a3c42;
        font-size: 12px;
        font-family: Menlo;
        font-weight: 400;
      }

      .line-number {
        text-align: right;
        color: #c4c4c4;
      }

      .fold {
        display: inline-block;
        vertical-align: top;

        width: 24px;
        height: 20px;

        position: relative;

        &:hover .arrow {
          opacity: 1;
        }

        .thumbnail-container {
          width: 16px;
          height: 16px;
          margin: 0;

          position: absolute;
          top: 2px;
          left: 4px;

          .thumbnail {
            width: 16px;
            height: 16px;

            border-radius: 2px;
            overflow: hidden;

            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        .arrow {
          position: absolute;
          top: 1px;
          left: 0;

          width: 24px;
          height: 18px;

          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url('');

          opacity: 0.5;

          &.folded {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('');
          }
        }
      }

      .key {
        color: #e4564a;
      }

      .colon {
        margin-right: 4px;
      }

      .url,
      .boolean,
      .null {
        color: #0184bc;
      }

      .url {
        border-bottom: 1px solid rgba(1, 132, 188, 0.8);
        height: 19px;
      }

      .value-quote-start,
      .string,
      .value-quote-end {
        color: #50a14f;
      }

      .number {
        color: #986901;
      }

      .dots {
        display: inline-block;
        vertical-align: top;

        width: 11px;
        height: 6px;

        margin-top: 7px;
        margin-left: 3px;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('');
      }

      .full-url {
        display: none;
      }
    }
  }
}
